<template>
  <div>
    <table>
        <thead>
            <tr>
                <slot name="head"></slot>
            </tr>
        </thead>

        <tbody>
            <tr v-for="(item, index) in  list" :key="item.id">
                <!-- 插槽作用域-以加属性名的方式传参 -->
                <slot name="body" :item="item" :index="index"></slot>
            </tr>
        </tbody>
    </table>
  </div>
</template>

<script>
export default {
    props:{
        list:Array
    },
}
</script>

<style scoped>
    table{
        margin: 20px auto;
        border-collapse: collapse;
        text-align: center;
    }
    th,td{
        width: 100px;
        height: 50px;
        line-height: 50px;
        border: 2px solid rgb(163, 161, 161);
    }
    th{
        background-color: blue;
        color: #fff;
    }
    img{
        width: 100px;
        height: 100px;
    }
</style>